import './App.css';

//react中存在两种形式的组件: 函数式组件, 类组件
//使用 rcc 快速创建 类组件  ( 主要使用这个 )
//使用 rsf 快速创建 函数式组件

import React, { Component, lazy, Suspense } from 'react';
import { Route, Redirect, Switch, Router } from 'react-router-dom'
import history from './utils/history';

// import Index from './views/Index'
// import Login from './views/Login'
// import NotFound from './views/NotFound'

var Index = lazy(() => import('./views/Index'))
var Login = lazy(() => import('./views/Login'))
var Register = lazy(() => import('./views/Register'))
var NotFound = lazy(() => import('./views/NotFound'))
var Goodinfo = lazy(() => import('./views/Goodinfo'))
var Search = lazy(() => import('./views/Search'))
var Collect = lazy(() => import('./views/Collect'))

class App extends Component {
  render() { //渲染组件模板到视图
    return (
      <div>
        <Suspense fallback={<div className='loading'></div>}>
          <Router history={history}>
            <Switch>
              {/* 注意: 当某个组件内存在嵌套子路由时, 当前组件所在的路由规则就不能添加exact精确匹配属性 */}
              <Route path="/index" component={Index} />
              <Route exact path="/login" component={Login} />
              <Route exact path="/register" component={Register} />
              <Route exact path="/goodinfo" component={Goodinfo} />
              <Route exact path="/search" component={Search} />
              <Route exact path="/collect" component={Collect} />
              <Redirect exact from='/' to="/index" />
              <Route path="*" component={NotFound} />
            </Switch>
          </Router>
        </Suspense>
      </div>
    );
  }
}

export default App;